<template>
	<view>
		<view class="item" v-for="item in teamList" hover-class="listHover" @click="goToTeamChat(item.teamId,item.name)">
			<image class="image" :src="item.image" mode=""></image>
			<view class="name">
				{{item.name}}
			</view>
		</view>
		
		<view class="newTeam" @click="goToAddTeam">
			新建群聊
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				teamList: []
			};
		},
		onShow() {
			this.getTeamList()
		},
		methods: {
			// 进入对应的聊天页面
			goToTeamChat(teamId, teamName) {
				uni.navigateTo({
					url: "/pages/contact/teamChat/teamChat?teamId=" + teamId + "&teamName=" + teamName
				})
			},
			goToAddTeam(){
				uni.navigateTo({
					url: "/pages/team/addTeam/addTeam"
				})
			},
			getTeamList() {
				uni.request({
					url: getApp().url + 'team/getTeamList',
					data: {
						userId: uni.getStorageSync("userId"),
						enterpriseId: uni.getStorageSync("enterprise").enterpriseId
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						this.teamList = response.data.data
					},
					fail: (error) => {
						console.log(error);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.item {
		display: flex;
		padding: 5px 2vw;

		.image {
			width: 16vw;
			height: 16vw;
			border-radius: 8vw;
		}

		.name {
			width: 80vw;
			line-height: 16vw;
			text-align: center;
		}
	}
	
	.listHover {
		background-color: #C3C3C3;
	}
	
	.newTeam{
		margin: 2vw;
		height: 40px;
		line-height: 40px;
		text-align: center;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	}
</style>